<template>
	<view class="page">
		<!-- 掌握率和操作区域 -->
		<view class="flex padding bg-white">
			<u-text color="#333333" size="32rpx" text="掌握率:60%"></u-text>
			<view>
				<u-button shape="circle" type="primary" text="更改掌握率" @click="redoMastery"></u-button>
			</view>
		</view>

		<!-- 错题列表 -->
		<view class="question-list">
			<!-- 错题项目 -->
			<view class="question-item" v-for="(item, index) in questionList" :key="index" @click="goToQuestionDetail(item)">
				<!-- 日期和来源信息 -->
				<view class="flex justify-between align-center">
					<u-text color="#999999" size="28rpx" :text="`${item.date}`"></u-text>
					<u-text align="right" color="#999999" size="28rpx" :text="`来源:${item.source}`"></u-text>
				</view>

				<!-- 题目内容 -->
				<view class="margin-top-sm">
					<u-text color="#333333" size="32rpx" :text="item.content"></u-text>
				</view>

				<!-- 题目图片 -->
				<view v-if="item.image">
					<image style="width:300rpx;height:300rpx;" :src="item.image" mode="aspectFit"
						@click="previewImage(item.image)">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 错题数据
const questionList = ref([
	{
		id: 1,
		date: '2020-02-21',
		source: '教师拍摄',
		content: '如图是由许多等号的等腰直角三角形黑白交错排列而成的正方形，一只蚂蚁在上面自由爬行，那么蚂蚁停留在黑色涂抹上的概率是______。',
		image: '/static/image/img-math-bg.png' // 使用现有的数学图片作为示例
	},
	{
		id: 2,
		date: '2020-02-21',
		source: '教师拍摄',
		content: '如图是由许多等号的等腰直角三角形黑白交错排列而成的正方形，一只蚂蚁在上面自由爬行，那么蚂蚁停留在黑色涂抹上的概率是______。',
		image: '/static/image/img-math-bg.png' // 使用现有的数学图片作为示例
	}
])

// 方法
const redoMastery = (item) => {
	uni.navigateTo({
		url: `/pages/common/knowledge/updateMasteryRate?id=${item.id}`
	})
}

const goToQuestionDetail = (item) => {
	uni.navigateTo({
		url: `/pages/common/knowledge/questionDetail?id=${item.id}`
	})
}

const previewImage = (imageSrc) => {
	uni.previewImage({
		urls: [imageSrc],
		current: imageSrc
	})
}

onMounted(() => {
	// 获取页面参数
	uni.setNavigationBarTitle({
		title: '10以内的加减法'
	})
})
</script>

<style scoped lang="scss">
/* 错题列表 */
.question-list {
	padding: 0 32rpx;
	margin-top: 30rpx;
}

.question-item {
	background-color: #FFFFFF;
	border-radius: 16rpx;
	padding: 32rpx;
	margin-bottom: 32rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}
</style>